
import React, {Component} from 'react';
import { View, Text, ScrollView } from 'react-native';

export default class ScrollViewScreen extends Component {
  render() {
    return (
       <ScrollView
      //  默认为垂直排列 此属性为true改为水平排列
           horizontal={true}
          //  禁用水平滚动条
           showsHorizontalScrollIndicator={false}
          //  自动分页限ios
           pagingEnabled={true}
          //  禁用滚动限ios
           // scrollEnabled={false}
        >
         {this.renderChildView()} 
       </ScrollView>
    );
  }
  
  renderChildView(){
     // 数组
     var allChild = [];
     var colors = ['green', 'green', 'blue', 'yellow', 'purple'];
     // 遍历
    for(var i=0; i<5; i++){
      allChild.push(
        //  循环排列的view中必须有唯一表示
          <View key={i} style={{backgroundColor:colors[i], width:'100%', height:120}}>
             <Text style={{flex:1,fontSize:20,marginTop:50,marginLeft:100}}>{colors[i]}</Text>
          </View>
      );
    }
    // 返回数组，不然怎么显示出来
    return allChild;
  }
}
